<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>single</title>
<!-- Custom Theme files -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- //Custom Theme files -->
<link href="/front/css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
<link href="/front/css/style.css" type="text/css" rel="stylesheet" media="all">
<!-- js -->
<script src="/front/js/jquery.min.js"></script>
<script type="/front/text/javascript" src="js/bootstrap-3.1.1.min.js"></script>
<script src="/front/js/imagezoom.js"></script>
<!-- //js -->
<!-- cart -->
<script src="/front/js/simpleCart.min.js"> </script>
<!-- cart -->
<!-- FlexSlider -->
<script defer src="/front/js/jquery.flexslider.js"></script>
<link rel="stylesheet" href="/front/css/flexslider.css" type="text/css" media="screen" />
<script>
	// Can also be used with $(document).ready()
	$(window).load(function() {
	  $('.flexslider').flexslider({
		animation: "slide",
		controlNav: "thumbnails"
	  });
	});
	
	var quantity = $("#quantity");
			var n = [[${product.productInventory}]];//获取库存数量
			console.log([[${product.productId}]]);
			var num = $("#quantity").val();
			//购买数量减事件处理
			$(document).ready(function(){
				$("#minus").click(function() {
				var num = $("#quantity").val();
				if(num > 1) {
				$("#quantity").val(num-1);
				}
			});
			
			/*
				增加购物车操作
				使用ajax实现
				黄柏银增加 <a>标签的id和下面这个函数
			*/
			$("#add").click(function(){
			 console.log("点击");
				$.ajax({
					type:"post",
					url:"/cart/add",
					data:{
						id:[[${product.productId}]], 
						quantity:$("#quantity").val()
					},
					success:function(data) {
						if(data == "yes") {
							alert("添加购物车成功");
						}
						else {
							alert("添加购物车失败");
						}
					},
					error:function(data) {
						alert("您还没有登录,请先登录");
						//没有登录则强制跳转登录
						//我们代码独立的登录页面
						/* window.location.href = "<%=request.getContextPath()%>/user/login"; */
					}
				});
			});
			})
			
			//购买数量加事件处理
			$(document).ready(function(){
			$("#plus").click(function() {
			var num = $("#quantity").val();
				if(num < n) {
				$("#quantity").val(parseInt(num)+1);
				}
			});
			})
			//购买数量光标失去焦点事件:判断输入的数字是否大于库存数量
			quantity.blur(function() {
				var num = parseInt(quantity.val());
				if(num > n) {
					alert("最大购买数量" + n + "个");
					$(this).val(n);
				}
			});
			
			//点击加入购物车的超链接进行添加到购物车操作
			//使用ajax
			
</script>
<!--//FlexSlider -->
</head>
<body>
	<!--header-->
	<div class="header">
		<div class="container">
			<nav class="navbar navbar-default" role="navigation">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<h1 class="navbar-brand"><a  href="index">Yummy</a></h1>
				</div>
				<!--navbar-header-->
				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li><a href="index" class="active">首页</a></li>
						<li><a href="#" class="dropdown-toggle" data-toggle="dropdown">生日蛋糕</a>
							
					   <li class="dropdown grid">
							<a href="#" class="dropdown-toggle list1" data-toggle="dropdown">精品糕点</a>
							
						<li class="dropdown grid">
							<a href="#" class="dropdown-toggle list1" data-toggle="dropdown">联系我们</a>
							
											
					</ul> 
					<!--/.navbar-collapse-->
				</div>
				<!--//navbar-header-->
			</nav>
			<div class="header-info">
				<div class="header-right search-box">
					<a href="#"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></a>				
					<div class="search">
						<form class="navbar-form">
							<input type="text" class="form-control">
							<button type="submit" class="btn btn-default" aria-label="Left Align">
								Search
							</button>
						</form>
					</div>	
				</div>
				<div class="header-right login">
					<a href="#"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></a>
					<div id="loginBox">                
						<form id="loginForm">
							<fieldset id="body">
								<fieldset>
									<label for="email">Email Address</label>
									<input type="text" name="email" id="email">
								</fieldset>
								<fieldset>
									<label for="password">Password</label>
									<input type="password" name="password" id="password">
								</fieldset>
								<input type="submit" id="login" value="Sign in">
								<label for="checkbox"><input type="checkbox" id="checkbox"> <i>Remember me</i></label>
							</fieldset>
							<p>New User ? <a class="sign" href="account">Sign Up</a> <span><a href="#">Forgot your password?</a></span></p>
						</form>
					</div>
				</div>
				<div class="header-right cart">
					<a href="#"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span></a>
					<div class="cart-box">
						<h4><a href="checkout">
							<span class="simpleCart_total"> $0.00 </span> (<span id="simpleCart_quantity" class="simpleCart_quantity"> 0 </span>) 
						</a></h4>
						<p><a href="javascript:;" class="simpleCart_empty">Empty cart</a></p>
						<div class="clearfix"> </div>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
	<!--//header-->
	<!--//single-page-->
	<div class="single">
		<div class="container">
			<div class="single-grids">				
				<div class="col-md-4 single-grid">		
					<div class="flexslider">
						<ul class="slides" >
							<li th:each="img:${imgList}" th:attr="data-thumb=${img.imgUrl}">
								<div class="thumb-image">
									<img th:src="${img.imgUrl}" data-imagezoom="true" class="img-responsive"> 
								</div>
							</li>
						</ul>
					</div>
				</div>	
				<div class="col-md-4 single-grid simpleCart_shelfItem">		
					<h3 th:text="${product.productName}"></h3>
					<h3 th:text="${product.productDescribe}"></h3>
				<div >
						<div >
						   <h5 class="item_price">惊喜价格：  ¥<span th:text="${product.productPrice}"></h5>
						</div>
					</div>
					<div class="number">
					<p class="qty"> 数量 :  </p>
					<input type="button" value="-" id="minus">
					<input min="1" type="text"  id="quantity" name="quantity" value="1" >
					<input type="button" value="+" id="plus">
					<p class="qty">库存：</p>
					<p class="qty" id="n" th:text="${product.productInventory}"></p>
					</div>
					<div class="btn_form">
						<a  class="add-cart item_add" id="add">加入购物车</a>	
					</div>
					<div class="tag">
						<!-- <p th:text="${product.productType}"></p> -->
					</div>
				</div>
				<div class="col-md-4 single-grid1">
					<h2>MORE</h2>
					<ul>
						
						<li><a href="products" style="display: block;text-align: center;">更多蛋糕</a></li>
						<li><a href="account" style="display: block;text-align: center;">注册用户</a></li>
						
						<li><a href="account" style="display: block;text-align: center;">我的账户</a></li>
						<li><a href="contact" style="display: block;text-align: center;">我的地址</a></li>
						
						<li><a href="order" style="display: block;text-align: center;">历史订单</a></li>
						
						
					</ul>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!-- collapse -->
	<div class="collpse tabs">
		<div class="container">
			<div class="panel-group collpse" id="accordion" role="tablist" aria-multiselectable="true">
				<div class="panel panel-default">
					<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
						
					</div>
				</div>
			</div>
		</div>
	</div>

	
	<!--footer-->
	<div class="footer-bottom">
		<div class="container">
			<p>Copyright &copy; 2019.Company name All rights reserved.More Templates <a href="http://www.cssmoban.com/" target="_blank" title="Yummy之家">Yummy之家</a> </p>
		</div>
	</div>
</html>